<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Create 3D models using glTF.">
    <meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">

    <title>animation</title>

    <script type="text/javascript" src="js/Sandcastle-header.js"></script>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/Cesium.js"></script>
</head>
<body>
<style>
    @import url(css/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div>SRTM</div>
    <input min="0" max="100" step="1" data-bind="value: srtm, valueUpdate: 'input'" type="range">
    <input size="5" data-bind="value: srtm" type="text">
    <div>SLOPE</div>
    <input min="0" max="100" step="1" data-bind="value: slope, valueUpdate: 'input'" type="range">
    <input size="5" data-bind="value: slope" type="text">
    <div>Type</div>
    <select data-bind="options: types, optionsText: 'name', value: selectedType, optionsCaption: 'Choose a Type...'"></select>
</div>
<script>


    function startup(Cesium) {

        var viewModel = {
            srtm: 10,
            slope: 5,
            types: [{
                name: 'type1',
                values: '100'
            }, {
                name: 'type2',
                values: '200'
            }
            ],
            selectedType: undefined
        };


        var viewer = new Cesium.Viewer('cesiumContainer', {
            shouldAnimate: true,
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
            }),
            baseLayerPicker: false
        });


        Cesium.knockout.track(viewModel); // 跟踪此Model
        var toolbar = document.getElementById('toolbar'); // 获取前端监控div
        Cesium.knockout.applyBindings(viewModel, toolbar); // 绑定监控

        var entity = viewer.entities.add({
            model: {
                uri: 'model/CesiumAir/Cesium_Air.gltf',
                minimumPixelSize: 64
            },
            position: Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000.0)
        });
        viewer.trackedEntity = entity;


        //计算当前时间点飞机模型的位置矩阵
        function computeModelMatrix(entity, time) {
            //获取位置
            var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());
            if (!Cesium.defined(position)) {
                return undefined;
            }
            //获取方向
            var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());
            if (!Cesium.defined(orientation)) {
                var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, new Cesium.Matrix4());
            } else {
                modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4());
            }
            return modelMatrix;
        }

//计算引擎(粒子发射器)位置矩阵
        function computeEmitterModelMatrix() {
            //方向
            hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());
            var trs = new Cesium.TranslationRotationScale();
            //以modelMatrix(飞机)中心为原点的坐标系的xyz轴位置偏移
            trs.translation = Cesium.Cartesian3.fromElements(2.5, 3.5, 1.0, new Cesium.Cartesian3());
            trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());
            return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
        }

//粒子系统参数
        var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image: 'img/fire.png',
            startScale: 1.0,
            endScale: 4.0,
            minimumLife: 1.0,
            maximumLife: 1.5,
            speed: 5.0,
            width: 20,
            height: 20,
            lifeTime: 16.0,
            bursts: [
                new Cesium.ParticleBurst({time: 1, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 2, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 3, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 4, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 5, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 6, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 7, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 8, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 9, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 10, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 11, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 12, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 13, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 14, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 15, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 16, minimum: 300, maximum: 500}),
                new Cesium.ParticleBurst({time: 17, minimum: 300, maximum: 500}),
            ],
            //主模型参数(位置)
            modelMatrix: computeModelMatrix(entity, Cesium.JulianDate.now()),
            // 发射器参数
            emitter: new Cesium.CircleEmitter(0.5),
            rate: 5.0,
            emitterModelMatrix: computeEmitterModelMatrix(),
            //颜色
            startColor: Cesium.Color.RED.withAlpha(0.7),
            endColor: Cesium.Color.YELLOW.withAlpha(0.3),
            forces: [applyGravity]
        }));

//重力计算
        var gravityScratch = new Cesium.Cartesian3();

        function applyGravity(p, dt) {

            var position = p.position;

            Cesium.Cartesian3.normalize(position, gravityScratch);
            Cesium.Cartesian3.multiplyByScalar(gravityScratch, 1 * dt, gravityScratch);

            p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
        }

//刷新位置
        viewer.scene.preRender.addEventListener(function (scene, time) {
            particleSystem.modelMatrix = computeModelMatrix(entity, time);
        });


    }

    if (typeof Cesium !== 'undefined') {
        startup(Cesium);
    } else if (typeof require === 'function') {
        require(['Cesium'], startup);
    }
</script>

</body>
</html>
